<template>
  <div class='groupManage' >
      <el-row class='first-title'>
        <div class="lf">
          <h3 class="">干部名册</h3>
        </div>
        <search-box @getValue="getSearchText"></search-box>
      </el-row>
      <el-row class="second-sec">
          <div class="display-title">
            <el-radio-group v-model="radio3" @change="handleRadioChange" fill="#449d44" text-color="#fff">
              <el-radio-button label="名片">名片</el-radio-button>
              <el-radio-button label="信息简表" >信息简表</el-radio-button>
              <el-radio-button label="信息详表">信息详表</el-radio-button>
            </el-radio-group>
            <div class="rt select-dept" >
               <span>请选择部门：</span>
               <el-select  v-model="leaderSec" @change="getLeaderSecList" placeholder="请选择">
                  <el-option
                  v-for="item in unitList"
                  :key="item.id"
                  :label="item.c_lea_unit_name"
                  :value="item.c_lea_unit_name">
                  </el-option>
               </el-select>
            </div> 
          </div>
          <div class="switch-btn" v-if="!isLeader" :class="{isHide:isHide}">
            <el-switch
                v-model="principal"
                on-text=""
                off-text=""
                on-color="#449d44"
                on-value="Y"
                off-value=""
                @change="selectWork"
            >
            </el-switch>正职
            <el-switch
                v-model="backSeat"
                on-text=""
                off-text=""
                on-color="#449d44"                
                on-value="Y"
                off-value=""
                @change="selectLeaderWork"
                >
            </el-switch>退居二线
            <el-switch
                v-model="tuiyang"
                on-text=""
                off-text=""
                on-color="#449d44"
                on-value="Y"
                off-value=""
                @change="selectRetire"
                >
            </el-switch>内部退养
          </div>

      </el-row>
      <div class="totalNum">
          <a :href="uploadUrl" v-if="showDetailTable" class="detail downloadTable"><i class="fa fa-file-excel-o"></i> 导出详表</a>
          &nbsp;
          <div class="rt">共计<strong>{{totalNum}}</strong>人</div>
      </div>
      <el-row class="third-card">
          <div class="containerCard"  v-if="showCard">
              <template  v-for="(unit,index) in unitContainer">
                <div class="unitContainer" v-bind:style="{borderTopColor : unit.color}" >
                    <div class="collapse-card" >
                        <h3 class="box-title">
                            {{unit.c_lea_unit_name}}（共{{unit.num}}人）
                        </h3>
                        <div class="collapse-container pull-right">
                            <a v-if="unit.show" class="collapse" @click="collpseCard(unit)" data-widget="collapse"><i class="fa fa-minus"></i></a>
                            <a v-else class="collapse" @click="collpseCard(unit)" data-widget="collapse"><i class="fa fa-plus"></i></a>
                        </div>
                        
                    </div>
                    <transition name="slide-fade">
                      <div class="card-body" v-if="unit.show">
                        <card-leader v-for='item in unit.memberList' :personInfo='item' :hideLeader="unit.personnel" :hidePay="unit.pay"></card-leader>
                      </div>
                    </transition>

                </div>   
              </template>
       
          </div>

          <div class="table-container" v-if="showTable">
            <div class="collapse-card">
                <h3 class="box-title">
                    信息简表（共{{totalNum}}人）
                </h3>
                <div class="collapse-container pull-right">
                    <a class="collapse" @click="collpseCard" data-widget="collapse"><i class="fa fa-minus"></i></a>
                </div>
            </div>
            <div class="handle-table">
               <a :href="downloadTable" class="downloadTable"><i class="fa fa-file-excel-o"></i> 导出简表</a>
               <div class="rt selectSet">
                  <!--<a  class="default alt" title="切换"><i class="fa fa-list-alt" aria-hidden="true"></i></a>-->
                  <a @click="showColList" class="default" title="自定义列"><i class="fa fa-th" aria-hidden="true"></i><span class="caret"></span></a>
                  <search-col :ifShow.sync='colShow' :checkedCities.sync="checkedCities" :cities="colTotalList" @changeCol="getCheckedArr"></search-col>
               </div>
            </div>
            
            <el-table
                :data="unitTableList"
                style="width: 100%"
                :fit="tablefit"
                :row-class-name="handleRowClass"
                >
                <!--<el-table-column width="20"  type="expand">
                  <template scope="props">
                      <el-form label-position="left" inline class="demo-table-expand">
                      <el-form-item label="单位:">
                          <span>{{ props.row.c_leader_unit }}</span>
                      </el-form-item>
                      <el-form-item label="姓名:">
                          <span>{{ props.row.name }}</span>
                      </el-form-item>
                      <el-form-item label="出生年月:">
                          <span>{{ props.row.birthdate }}</span>
                      </el-form-item>
                      <el-form-item label="性别:">
                          <span>{{ props.row.sex_descr }}</span>
                      </el-form-item>
                      <el-form-item label="职务:">
                          <span>{{ props.row.c_current_job }}</span>
                      </el-form-item>
                      <el-form-item label="任现职时间:">
                          <span>{{ props.row.c_cur_job_dt }}</span>
                      </el-form-item>
                      <el-form-item label="籍贯:">
                          <span>{{ props.row.denative_place_chnsc }}</span>
                      </el-form-item>
                      <el-form-item label="民族:">
                          <span>{{ props.row.ethnic_grp }}</span>
                      </el-form-item>
                      <el-form-item label="政治面貌:">
                          <span>{{ props.row.political_sta_chn }}</span>
                      </el-form-item>
                      <el-form-item label="参加工作时间:">
                          <span>{{ props.row.c_work_time }}</span>
                      </el-form-item>
                      <el-form-item label="学历学位:">
                          <span>{{ props.row.highest_edu }}</span>
                      </el-form-item>   
                      <el-form-item label="毕业院校:">
                          <span>{{ props.row.school_descr }}</span>
                      </el-form-item> 
                      <el-form-item label="所学专业:">
                          <span>{{ props.row.maior_descr }}</span>
                      </el-form-item>                                                                                                  
                      </el-form>
                  </template>
                </el-table-column>-->
                <el-table-column :prop="item.prop" :class-name="item.class" :label="item.label" :min-width="item.width"  :key="item.prop" v-for='item in tableOption'>
                    <template  scope="scope">
                      <a v-if="item.needAtag" target="_blank" class="resumePeo" @click="targetLeaderRoute(scope)">{{scope.row.name}}</a>
                      <span v-else>{{scope.row[item.prop]}}</span>
                    </template>
                </el-table-column>          
            </el-table>
         </div>


         <div class="containerCard"  v-if="showDetailTable">
            <!--<div class="handle-table">
               <a :href="uploadUrl" class="downloadTable"><i class="fa fa-file-excel-o"></i> 导出详表</a>
               <div class="rt selectSet">
                  <a  class="default alt" title="切换"><i class="fa fa-list-alt" aria-hidden="true"></i></a>
                  <a @click="showColList" class="default" title="自定义列"><i class="fa fa-th" aria-hidden="true"></i><span class="caret"></span></a>
                  <search-col :ifShow.sync='colShow' @changeCol="getCheckedArr"></search-col>
               </div>
            </div>-->
            <template  v-for="(unit,index) in unitContainer">
                <div class="unitContainer" v-bind:style="{borderTopColor : unit.color}" >
                    <div class="collapse-card" >
                        <h3 class="box-title">
                            {{unit.c_lea_unit_name}}（共{{unit.num}}人）
                        </h3>
                        <div class="collapse-container pull-right">
                            <a v-if="unit.show" class="collapse" @click="collpseCard(unit)" data-widget="collapse"><i class="fa fa-minus"></i></a>
                            <a v-else class="collapse" @click="collpseCard(unit)" data-widget="collapse"><i class="fa fa-plus"></i></a>
                        </div>
                        
                    </div>
                    <transition name="slide-fade">
                        <div class="card-body" v-if="unit.show">
                             <detail-table :leaderType="leaderType" :searchText="searchText" :principal="principal" :backSeat="backSeat" :tuiyang="tuiyang" :tableData="unit.memberList"></detail-table>
                        </div>
                    </transition>

                </div>   
              </template>
             
          </div>
      </el-row>
  </div>
</template>

<script>
  // import 'Mock/mock_data'v-loading.fullscreen.lock="loading"
  import Vue from 'vue'
  import { ButtonGroup,Switch,Select,Input, Col, Row, Radio,RadioGroup,RadioButton,Option, Table,TableColumn,Form,FormItem} from 'element-ui' 
  Vue.use(ButtonGroup)
  Vue.use(Switch)
  Vue.use(Select)
  Vue.use(Input)
  Vue.use(Col)
  Vue.use(Row)
  Vue.use(Radio)
  Vue.use(RadioGroup)
  Vue.use(RadioButton)
  Vue.use(Option)
  Vue.use(Table)
  Vue.use(TableColumn)
  Vue.use(Form)
  Vue.use(FormItem)
  // Vue.use(Loading.directive)
  // Vue.prototype.$loading = Loading.service

  import cardLeader from '@/components/public/card-leader'
  import searchBox from '@/components/public/search-box'
  import searchCol from '@/components/public/selectShowCol'
//   import DetailTable from '@/components/leader/table-a'
    const DetailTable = r => require.ensure([],() => r(require("@/components/leader/table-a")),'DownSel');
    export default {
      data() {
        return {

          radio3:'名片',
          unitList: [],
          isHide:false,
          
          ifShowColObj:{
            
          },
          colShow:false,
          unitContainer:null,
          unitTableList:null,
          showCard:true,
          totalNum:null,
          showTable:false,
          showDetailTable:false,
          tablefit:true,
          tableOption:null,
          colTotalList:null,
          checkedCities:[0, 1, 2,3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13,14],

          leaderType:'B',
          isLeader:false,
          principal:'',
          searchText:'',
          backSeat:'',
          tuiyang:'',
          leaderUnit:'',
          leaderSec:'',
          englishTitle:null,
          title:null,
          
          isFirstTime:true,
         
        }
      },
      methods: {
        getSearchText:function(text){
          var self =this;
          this.searchText = text;
          if (text.trim()) {
            var params = {
                search:this.searchText,
                leaderUnit:this.leaderSec
            };
            this.ajaxPost(this.URL.executiveSearch.url,params);
          } else {
            this.getLeaderListCommonAjax();  
          }
        },
        selectWork:function(value){
          console.log(typeof value);
          if (value === "Y") {
            this.principal = 'Y'; 
            this.backSeat = "";
            this.tuiyang = "";
          }
          this.getLeaderListCommonAjax(); 

        },
        concatStr:function(data){
            let ret = ''
            for (let it in data) {
                ret += it + '=' + data[it] + '&'
            }
            return ret;
        },
        handleRowClass:function(row, index){
          return index%2 === 0 ? 'even-row' : 'odd-row';
        },
        showColList:function(){
            this.colShow = this.colShow ? false : true;
        },
        targetLeaderRoute:function(scope){
            localStorage.setItem('em_leader',scope.row.emplid);
            window.open( "/module/leaderAppoint.html");
        },
        getCheckedArr:function(value){
            var arr = []
            value.sort(function(a,b){
                return a - b;
            });

            for (var i=0;i<value.length;i++) {
                arr.push(this.colTotalList[value[i]]);          
            }
            
            this.tableOption = JSON.parse(JSON.stringify(arr));

            this.assignTitles();

        },
        assignTitles:function(){
            var title='',englishTitle='';
            for (var j=0;j<this.tableOption.length;j++){
                title = title ?  title + ',' + this.tableOption[j].label : title + this.tableOption[j].label;
                if (this.tableOption[j].prop !== "num") {
                    englishTitle = englishTitle ? englishTitle = englishTitle + ',' + this.tableOption[j].prop : englishTitle + this.tableOption[j].prop;
                }
                
            }
            this.title = title;
            this.englishTitle = englishTitle;
        },
        selectLeaderWork:function(value){
          if (value === "Y") {
            this.backSeat = "Y";
            this.principal = '';            
            this.tuiyang = "";
          
          }
          this.getLeaderListCommonAjax();
        },
        selectRetire:function(value){
          if (value === "Y") {
            this.tuiyang = "Y";
            this.backSeat = "";
            this.principal = '';            
          }
          this.getLeaderListCommonAjax();
        },
        handleRadioChange:function(value){
          if (value === "信息简表") {
              this.showCard = false;
              this.showTable = true;
              this.showDetailTable = false;
          } else if (value === "名片") {
              this.showCard = true;
              this.showTable = false;
              this.showDetailTable = false;
          } else if (value === "信息详表") {
              this.showDetailTable = true;
              this.showCard = false;
              this.showTable = false;
          }

          console.log(value,'radioValue');

        },
        getLeaderSecList:function(value){
          var self =this;
          if (value === "全部单位") {
            this.leaderSec="";
          }
          this.getLeaderListCommonAjax();
        },
        collpseCard:function(unit){
          unit.show =  unit.show ? false : true; 
        },
        getLeaderListCommonAjax:function(type){
            var self = this;
            var params;
            params = 
                type === "search" ? {
                    search:this.searchText 
                } 
                :
                {
                leaderType:this.leaderType,
                search:this.searchText,
                principal:this.principal,
                backSeat:this.backSeat,
                tuiyang:this.tuiyang,
                leaderUnit:this.leaderSec,
                };
            this.ajaxPost(this.URL.getGroupByCondition.url,params);
        },
        ajaxPost:function(url,params){
            var self = this;
            this.Axios.Post(url,params)
                .then(function(res){
                    // self.loading = false;
                    // self.loadingInstance && self.loadingInstance.close();
                    // self.loadingInstance = null;
                    var arr = JSON.parse(JSON.stringify(res.data.datas.dataNum));
                    var arr1 = res.data.datas.dataList;
                    var optionArr = [];
                    for (var i=0; i<arr1.length; i++) {
                        arr1[i]["num"] = i+1;
                        if (arr1[i]["birthdate"] && arr1[i]["birthdate"].trim()) {
                          var a = arr1[i]["birthdate"].split(' ')[0].split('-');
                          arr1[i]["birthdate"] = a[0] + "." + a[1]
                        }

                        // if (arr1[i]["c_cur_job_dt"] && arr1[i]["c_cur_job_dt"].trim()) {
                        //   var a = arr1[i]["c_cur_job_dt"].split(' ')[0].split('-');
                        //   arr1[i]["c_cur_job_dt"] = a[0] + "." + a[1]
                        // }

                        // if (arr1[i]["c_work_time"] && arr1[i]["c_work_time"].trim()) {
                        //   var a = arr1[i]["c_work_time"].split(' ')[0].split('-')
                        //   arr1[i]["c_work_time"] = a[0] + "." + a[1]
                        // }

                        for (var j=0; j<arr.length; j++) {
                          if (j%4 === 0) {
                            arr[j]['color'] = 'green';
                            arr[j]['show'] = true;
                          } else if (j%4 === 1) {
                            arr[j]['color'] = 'blue';
                            arr[j]['show'] = true;
                          } else if (j%4 === 2) {
                            arr[j]['color'] = 'yellow';
                            arr[j]['show'] = true;
                          } else if (j%4 === 3) {
                            arr[j]['color'] = 'red';
                            arr[j]['show'] = true;
                          }
                          
                          if (arr1[i].c_leader_unit === arr[j].c_lea_unit_name ) {
                              if (!arr[j]['memberList']){arr[j]['memberList'] = []};
                              arr[j]["memberList"].push(arr1[i]);
                              break;
                          }
                        }
                    }
                    

                    for (var z=0; z<arr.length; z++) {
                        if (!arr[z]['memberList']) {
                            arr.splice(z,1);
                            z--;
                        }
                    }




                    self.colTotalList = [
                      {label:'序号',prop:"num",isShow:true,class:'width40',needAtag:false},
                      {label:'单位',prop:"c_leader_unit",isShow:true,width:'',needAtag:false},
                      {label:'姓名',prop:"name",isShow:true,handle:true,needAtag:true},
                      {label:'性别',prop:"sex_descr",isShow:true,class:'width40'},
                      {label:'职务',prop:"c_current_job",isShow:true},
                      {label:'任现职时间',prop:"c_cur_job_dt",isShow:true,class:'width90',handle:true},
                      {label:'出生年月',prop:"birthdate",isShow:true,handle:true},
                      {label:'籍贯',prop:"native_place_chn",isShow:true},
                      {label:'民族',prop:"ethnic_grp",isShow:true},
                      {label:'政治面貌',prop:"political_sta_chn",isShow:true},
                      {label:'参加工作时间',prop:"c_work_time",isShow:true,class:'width90',handle:true},
                      {label:'最高学历',prop:"highest_deg",isShow:true},
                      {label:'最高学位',prop:"highest_edu",isShow:true},
                      {label:'毕业院校',prop:"school_descr",isShow:true},
                      {label:'所学专业',prop:"major_descr",isShow:true}
                    ];
                    
                    self.tableOption = JSON.parse(JSON.stringify(self.colTotalList));
                		self.unitTableList = JSON.parse(JSON.stringify(arr1));
                    self.unitContainer = arr;
                    self.totalNum = res.data.total;

			              if (self.isFirstTime) {
		                    self.unitList = JSON.parse(JSON.stringify(res.data.datas.dataNum));
		                    self.unitList.unshift({c_lea_unit_name:'全部单位',c_leader_unit:''});
			                  self.isFirstTime = false;
			              }

                    
                    self.assignTitles();
            })
        },
      
      },
      computed:{
          downloadTable:function(){
            var params = {
                leaderType:encodeURIComponent(this.leaderType),
                search:encodeURIComponent(this.searchText),
                principal:encodeURIComponent(this.principal),
                backSeat:encodeURIComponent(this.backSeat),
                tuiyang:encodeURIComponent(this.tuiyang),
                leaderUnit:encodeURIComponent(this.leaderSec),
                token:localStorage.getItem('token'),
                title:encodeURIComponent(this.title),
                englishTitle:encodeURIComponent(this.englishTitle),
            }
            return this.Axios.baseURI +'/excel/unitExport?'+ this.concatStr(params); 
          },
          uploadUrl : function(){
            var params = {
                leaderType:this.leaderType,
                search:this.searchText,
                principal:this.principal,
                token:localStorage.getItem('token'),
                backSeat:this.backSeat,
                tuiyang:this.tuiyang
            }
            return this.Axios.baseURI +'/excel/detailExecutiveExport?'+ this.concatStr(params);
         }
      },
      filters:{
        handleDate:function(value){

          return value.split(' ')[0];
        }
      },
      mounted: function () {
        var self = this;
        // var params={
        //   employeeId:"",
        //   search:"",
        //   deptCategory:"",
        //   name:""
        // };
        this.leaderType = this.$route.query.leaderType ? this.$route.query.leaderType : 'B';
        this.isLeader = this.leaderType === "B" ? false : true;
        console.log(this.isLeader,"this.isLeader");
        // this.loading = true;
        // this.loadingInstance = Loading.service({
        //   target:'div.containerCard', 
        //   text:'加载中',
        //   customclass:'me'
        // });
        var params={
          leaderType:this.leaderType,
          search:'',
          principal:'',
          backSeat:'',
          tuiyang:'',
          leaderUnit:this.leaderSec
        };
        //绑定子页面需要的刷新模块方法
        this.getLeaderListCommonAjax();
    
      },
      components: {
          cardLeader,
          searchBox,
          searchCol,
          DetailTable
      },
      // props:{

      // },
      watch:{
        $route:{
          handler : function(val, oldVal){
            this.leaderType = this.$route.query.leaderType;
            this.isLeader = this.leaderType === "B" ? false : true;
            console.log(this.isLeader,"this.isLeader");
            this.searchText = '';
            this.principal = "";
            this.backSeat = "";
            this.tuiyang = '';
            this.leaderSec = '';
            this.radio3 = '名片';
            
            this.isFirstTime = true;

            // this.loadingInstance = Loading.service({ 
            //   target:'div.containerCard', 
            //   text:'加载中',
            //   customclass:'me'
            // });
            

            // this.loading = true;

                   
            if(this.leaderType === 'A'){this.isHide = true;} else if (this.leaderType === 'B') {this.isHide = false;}
            this.getLeaderListCommonAjax();
   
          }
        }
      }
    }

</script>

<style scoped> 
      .groupManage .first-title h3{
          font-size: 24px;
          margin-top: 20px;
          margin-bottom: 20px;
          font-weight: 500;
          line-height: 1.1;
      }
      .groupManage .second-sec{
          position: relative;
          border-radius: 3px;
          background: #ffffff;
          border-top: 3px solid #d2d6de;
          margin-bottom: 50px;
          width: 100%;
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
          border-top-color: #00a65a;
          color:#444;
          font-family: "Microsoft YaHei",museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif;
          font-weight: 400;
      }
      .content-right{
        float:right;
        margin-top:17px;
      }
      .groupManage .resumePeo{
        color:#00acd6;
        cursor: pointer;
      }

      .groupManage .select-dept{
        font-size: 14px;
      }
      .groupManage .display-title{
        border-bottom: 1px solid #f4f4f4;
        padding:10px;
      }
      .groupManage .switch-btn{
        padding: 10px 10px;
        font-size:14px;
      }
      .groupManage .collapse-card{
        position:relative;
        padding: 10px 10px;
        border-bottom: 1px solid #f4f4f4;
      }

      .groupManage .table-container{
          position: relative;
          border-radius: 3px;
          background: #ffffff;
          border-top: 3px solid #d2d6de;
          margin-bottom: 20px;
          width: 100%;
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
          border-top-color: #00a65a;
          background-color:#fff;
      }
      .groupManage .unitContainer{
          position: relative;
          border-radius: 3px;
          background: #ffffff;
          border-top: 3px solid #3c8dbc;
          margin-bottom: 20px;
          width: 100%;
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
          overflow: hidden;
          clear: both;
      }
      .groupManage .third-card .collapse-card .box-title{
          display: inline-block;
          font-size: 18px;
          color: #444;
          font-weight: 500;
          margin: 0;
          line-height: 1;
      }
      .groupManage .third-card .collapse-card .collapse-container {
          position: absolute;
          right: 10px;
          top: 10px;
          cursor:pointer;
      }
      .groupManage .third-card .collapse-card  .collapse {
          border-radius: 3px;
          -webkit-box-shadow: none;
          box-shadow: none;
          border: 0px;
          padding: 5px;
          font-size: 12px;
          background: transparent;
          color: #97a0b3;
      }
      .totalNum{
          font-size: 14px;
          line-height: 1.42857143;
          color: #333;
          position:relative;
      }


    .demo-table-expand {
      font-size: 0;
    }
    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 100%;
    }



  /*选项icon样式*/
    .groupManage .handle-table{
      
      clear: both;
      padding:20px 20px 30px 20px;
      border-bottom: 1px solid #dfe6ec;
    }
    .groupManage .selectSet{
      font-size: 14px;
      font-weight: normal;
      line-height: 1.42857143;
      text-align: center;
      white-space: nowrap;
      position: relative;
      clear: both;
      
    }
    .groupManage .selectSet .default{
      float: left;
      background-color: #f4f4f4;
      color: #444;
      padding: 6px 12px;
      border: 1px solid #ddd;
      border-radius: 3px;
      position: relative;
      z-index:1;
    }
    .groupManage .selectSet .alt{
        margin-right:-1px;
        
    }
    .groupManage .isHide{
        display:none;   
    }
    .groupManage .selectSet a:hover{
      z-index:4;  
      color: #333;
      background-color: #e6e6e6;
      border-color: #adadad;
    }
    .groupManage .selectSet .alt{
        margin-right:-1px;
    }

    .selectSet .default:first-child:not(:last-child){
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        
    }
    .selectSet .default:last-child:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .groupManage .downloadTable{
      padding: 7px 12px;
      margin-bottom: 0;
      font-size: 14px;
      font-weight: normal;
      line-height: 1.42857143;
      text-align: center;
      white-space: nowrap;
      background-color: #00acd6;
      border-color: #269abc;
      color: #fff;
      border-radius: 3px;
      display:inline-block;
    }
    .groupManage .detail{
        position: absolute;
        top:-30px;
        left:5px;
    }
    
    .groupManage .downloadTable:hover{
      background-color: #3c8dbc;
      border-color: #00acd6;
    }
    
    .caret {
      display: inline-block;
      width: 0;
      height: 0;
      margin-left: 2px;
      vertical-align: middle;
      border-top: 4px dashed;
      border-top: 4px solid \9;
      border-right: 4px solid transparent;
      border-left: 4px solid transparent;
  }



    /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */
  .slide-fade-enter-active {
    transition: all .2s ease;
  }
  .slide-fade-leave-active {
    transition: all .4s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateY(-10px);
    opacity: 0;
  }

    

</style>
<style>
    /*修改element-ui样式*/

  .groupManage .el-radio-button__inner:hover {
      color: #333;
  }
  .groupManage .el-radio-group .el-radio-button__inner:hover{
      background-color:#e7e7e7;
  }
  .groupManage .el-radio-group .el-radio-button__inner{
      background-color: #f4f4f4;
  }

  .groupManage .el-radio-group .is-active .el-radio-button__inner:hover{ 
        background-color: #d4d4d4 !important;
  }

  .groupManage .el-table th{
      white-space: nowrap;
      background-color: #fff;
      text-align: left;
  }
  .groupManage .el-table__header-wrapper thead div {
      background-color: #fff;
  }
  .groupManage .el-table__header-wrapper thead th>div.cell{
      padding-left: 0px;
      padding-right: 0px;
      text-align:center;
  }
  .groupManage .el-table__body-wrapper tr.el-table__row div.cell{
      padding-left: 0px;
      padding-right: 0px;
      text-align:center;
  }
  .groupManage .el-table{
    border:none;
  }
  .groupManage .el-table__body-wrapper table.el-table__body{
    width:100% !important;
    table-layout: auto;
  }
  .groupManage .el-table__header-wrapper .el-table__header{
    width:100% !important;
    table-layout: auto;
  }

  .groupManage .el-table .cell, .el-table th>div {
      padding-left: 0px;
      padding-right: 0px;
  }
  .groupManage .el-table .even-row {
    background-color: #f9f9f9;
  }
  .groupManage .el-table .even-row, .groupManage .el-table .even-row+tr:not(.odd-row) .el-table__expanded-cell{
    background-color: #f9f9f9;
  }
  .groupManage .el-table .el-table__body tbody tr td{
      height: 70px;
  }
  .groupManage .el-table th.gutter{
      display: none;
  }
  .groupManage .el-table  tr td.width90, .groupManage .el-table  tr th.width90{
      min-width: 100px;
  }
  .groupManage .el-table  tr td.width40, .groupManage .el-table  tr th.width40{
      width: 40px;
  }
  .groupManage .el-table  tr td.el-table__expand-column, .groupManage .el-table  tr th.el-table__expand-column{
      width: 20px;
  }
  .groupManage .el-form--inline .el-form-item__label {
    width: 150px;
    float: none;
    display: inline-block;
  }

</style>
